<template>

  <a-card>

    <h1><b>基础信息</b></h1>
    <a-row style="margin-left: 100px">
      <a-col :span="6">出库单号：{{detail?.deliveryKey||'-'}}</a-col>
      <a-col :span="6">出库单类型：{{DELIVERYTYPE[detail?.deliveryType]||'-'}}</a-col>
      <a-col :span="6">出库方式：{{detail?.deliveryWay == 1 ? '快递邮寄' : '线下配送'||'-'}}</a-col>
      <a-col :span="6">出库时间：{{detail?.createTime||'-'}}</a-col>
      <a-col :span="6">关联单号：{{detail?.orderKey||'-'}}</a-col>
      <a-col :span="6">出库状态：{{STATUS[detail?.status]||'-'}}</a-col>
    </a-row>

    <h1><b>物流信息</b></h1>
    <a-row style="margin-left: 100px">
      <a-col :span="6">物流公司：{{detail?.expType == 1 ? '顺丰快递' : '其他快递' }}</a-col>
      <a-col :span="6">邮费承担：{{detail?.freightFlag == 0 ? '我司承担' : '用户承担' }}</a-col>
      <a-col :span="6">收件人：{{detail?.lnker}}</a-col>
      <a-col :span="6">联系方式：{{detail?.lnktel}}</a-col>
      <a-col :span="12" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden" :title="detail?.exparea?.split('@').join(' ')+ ' ' +detail?.expdtl">收件地址：{{ detail?.exparea?.split('@').join(' ') }} {{detail?.expdtl}}</a-col>
      <a-col :span="6">物流单号：{{detail?.expno||'-'}}</a-col>
    </a-row>

    <h1><b>出库机器</b></h1>
    <div>总计：{{deviceList?.length}}台</div>
    <a-table :columns="deviceTableColumns" :data-source="deviceList" :scroll="{ x: 1200 }">
      <template #bodyCell="{ column,record,text }">

        <template v-if="column.dataIndex === 'category'">
          {{ text === 1 ? '手机' : '平板' }}
        </template>
      </template>
    </a-table>


  </a-card>

</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {deliveryOrderApi} from "/@/views/business/storage/delivery-order";
import {useRoute} from "vue-router";

const DELIVERYTYPE = {
  1: '回收退货',
  2: '第三方销售',
  3: '线下销售',
}
const STATUS = {
  0: '已作废',
  1: '待线下配送',
  2: '待通知快递',
  3: '待快递上门',
  4: '已出库',
}
const deviceTableColumns = [
  {
    align: 'center',
    title: '机器编码',
    dataIndex: 'machineCode',
    width: 180,
  },
  {
    align: 'center',
    title: '序列号',
    dataIndex: 'serialNumber',
    width: 180,
  },
  {
    align: 'center',
    title: 'IMEI',
    dataIndex: 'imei',
    width: 180,
  },
  {
    align: 'center',
    title: '仓储区',
    dataIndex: 'storageName',
    width: 120,
  },
  {
    align: 'center',
    title: '货架',
    dataIndex: 'rackName',
    width: 120,
  },
  {
    align: 'center',
    title: '型号',
    dataIndex: 'modelName',
    width: 200,
  },
  {
    align: 'center',
    title: '所属品类',
    dataIndex: 'category',
    width: 120,
  },
];
const deviceList =ref([]);
const detail =reactive({});
const route = useRoute();

onMounted(()=>{
  deliveryOrderApi.getDeliveryDetail(route.query?.id).then((res) => {
    console.log(res)
    Object.assign(detail,res.data)
    deviceList.value = res.data.machines||[];
  })
})
</script>

<style scoped lang="less">

</style>